<template>
    <el-dialog
        :visible="true"
        width="50%"
        :fullscreen="fullScreen"
        :append-to-body="true"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :before-close="handleClose">
        <span slot="title" class="el-dialog__title">
            联动数据
            <i class="el-icon-full-screen iconClass" v-if="!fullScreen" @click="()=>{fullScreen = true}"></i>
            <i class="el-icon-aim iconClass" v-else @click="()=>{fullScreen = false}"></i>
        </span>
        <div class="dialogBody">
            <div class="divClass">
                数据关联来源:
                <el-select filterable placeholder="请选择" v-model="linkTableName" :style="{width: '81%'}" @change='linkFormChange'>
                    <el-option
                        v-for="(item, index) in formOptions"
                        :key="index"
                        :label="item.formName"
                        :value="item.tableName"
                    />
                </el-select>
            </div>
            <div class="divClass">
                    <el-select filterable placeholder="请选择当前表单字段" v-model="curFormParamsOne" :style="{width: '37%'}" @change='curParamsChange'>
                        <el-option
                            v-for="(item, index) in curFormParamsOptions"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                <span class="valueCss">值等于</span>
                    <el-select filterable placeholder="请选择联动表单字段" v-model="linkFormParamsOne" ref="linkVisibleOne"
                        :style="{width: '35%'}" @change='linkParamsChangeOne' @visible-change="visibleChange">
                        <el-option
                            v-for="(item, index) in linkFormParamsOptions"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                的值时
            </div>
            <div class="divClass">
                <el-input style="width:37%" disabled v-model="activeData.__config__.label"></el-input>
                联动显示
                <el-select filterable placeholder="请选择联动表单字段" v-model="linkFormParamsTwo" ref="linkVisibleTwo" :style="{width: '35%'}"
                @change='linkParamsChangeTwo' @visible-change="visibleChange">
                    <el-option
                        v-for="(item, index) in linkFormParamsOptions"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
                中的对应值
            </div>
            <div class="tipClass divClass">
                <i class="el-icon-warning"> 建议：联动的字段类型要跟当前的字段类型一致，否则会出现数据展示不正确的问题。</i>
            </div>
            <div class="dialog-footer divClass">
                <el-button size="small" @click="handleClose">取消</el-button>
                <el-button size="small" type="primary" @click="confirm">确定</el-button>
            </div>
        </div>
    </el-dialog>
</template>
<script>
import {deepClone} from '../../../../utils/index.js'
import {getPageRelease} from '@/api/custom/formPoster.js'
import {listchoose, sourceTestList} from '@/api/custom/formDesigner'
export default {
    name: 'SettingLinkDataDialog',
    data () {
        return {
            fullScreen: false,
            pageInfo: {
                pageNo: 1,
                pageSize: 500
            },
            formOptions: [],
            linkTableName: '',
            curFormParamsOne: '',
            curFormParamsTwo: '',
            linkFormParamsOne: '',
            linkFormParamsTwo: '',
            curFormParamsOptions: [],
            curFormParamsMap: new Map(),
            linkFormParamsMap: new Map(),
            linkFormParamsOptions: [],
            // 过滤掉不使用联动数据的组件
            filterTag: ['TitleLine', 'el-switch', 'UsersSelector', 'DepartmentSelection', 'PostSelection', 'signature']
        }
    },
    props: ['activeData', 'fields'],
    created () {
        this.loopPushComp(this.fields)
        const {linkName, linkValueName, tableName, curParams} = this.activeData.__config__.linkObj
        listchoose().then(rsp => {
            if (rsp.code === 0) {
                // 查询所有已发布的表单下拉选项
                this.formOptions = rsp.data.map((item)=>{
                    return {
                        formName:item.name,
                        tableName:item.id
                    }
                })
                // this.formOptions.forEach((item, idx) => {
                //     const jsonObj = JSON.parse(item.formJsonUser)
                //     const newCompList = jsonObj.fields.filter(comp => {
                //         return !this.filterTag.includes(comp.__config__.tag)
                //     })
                //     this.linkFormParamsMap.set(item.tableName, newCompList)
                //     if (tableName === item.tableName) {
                //         this.linkFormParamsOptions = newCompList.map(comp => {
                //             return {
                //                 label: comp.__config__.label,
                //                 value: comp.__vModel__
                //             }
                //         })
                //     }
                // })
            }
        })
        // 初始化赋值
        if (tableName) {
            sourceTestList(tableName).then((res) => {
                if (res.code === 0) {
                    this.linkFormParamsOptions = res.data?.columns.map((item) => {
                        return {label:item.name,value:item.name}
                    })
                }
            })
            this.linkFormParamsOne = linkName
            this.linkFormParamsTwo = linkValueName
            this.linkTableName = tableName
            this.curFormParamsOne = curParams
        }
    },
    methods: {
        // 过滤掉不显示联动数据的组件和当前组件 并组装数据
        loopPushComp (list) {
            for (let i = 0; i < list.length; i++) {
                let item = list[i]
                if (['el-card','el-tabs','Steps','el-collapse'].includes(item.__config__.tag)) {
                    //布局组件，遍历内部子组件
                    item.__config__.children.forEach((c) => {
                        this.loopFindComp(c.__config__.children)
                    })
                } else if (item.__config__.tag === 'Subform') {
                    const tableCompList = item.__config__.children[0].__config__.children
                    for (let x =0; x < tableCompList.length; x++) {
                        const newComp = tableCompList[x]
                        if (this.activeData.__vModel__ !== newComp.__vModel__ && !this.filterTag.includes(newComp.__config__.tag)) {
                            this.curFormParamsOptions.push({
                                label: `(${item.__config__.label}) ${newComp.__config__.label}`,
                                value: newComp.__vModel__
                            })
                        }
                    }
                } else {
                    if (this.activeData.__vModel__ !== item.__vModel__ && !this.filterTag.includes(item.__config__.tag)) {
                        this.curFormParamsOptions.push({
                            label: item.__config__.label,
                            value: item.__vModel__
                        })
                    }
                }
            }
        },
        linkFormChange (val) {
            // 切换关联表单，对应联动表单选项变化
            sourceTestList(val).then((res) => {
                if (res.code === 0) {
                    this.linkFormParamsOptions = res.data?.columns.map((item) => {
                        return {label:item.name,value:item.name}
                    })
                }
            })
            // 清空当前表单字段和联动字段
            this.curFormParamsOne = ''
            this.linkFormParamsOne = ''
            this.linkFormParamsTwo = ''
        },
        curParamsChange () {},
        linkParamsChangeOne () {},
        linkParamsChangeTwo () {},
        visibleChange (flag) {
            // if (!this.linkTableName && flag && (!this.linkFormParamsOne || !this.linkFormParamsTwo)) {
            //     this.$message.warning('请先选择数据关联来源')
            // }
        },
        confirm () {
            if (!this.linkTableName) {
                return this.$message.warning('请选择数据关联来源')
            }
            if (!this.curFormParamsOne) {
                return this.$message.warning('请选择当前表单字段')
            }
            if (!this.linkFormParamsOne || !this.linkFormParamsTwo) {
                return this.$message.warning('请选择联动表单字段')
            }
            const obj = {
                linkName: this.linkFormParamsOne, // 联动表单字段(条件)
                linkValueName: this.linkFormParamsTwo, // 获取联动表单值字段(结果字段)
                tableName: this.linkTableName, // 关联表单id
                curParams: this.curFormParamsOne, // 选中的当前表单某个字段
                returnField: this.activeData.__vModel__ // 需要塞值的字段(后台需要)
            }
            this.$emit('closeSettingDialog', obj)
        },
        // 关闭弹框
        handleClose () {
            this.$emit('closeSettingDialog', false)
        },
    }
}
</script>
<style lang="less" scoped>
/deep/.el-dialog__title{
    width: 100%;
}
.valueCss{
    display:inline-block;
    width:63px;
    text-align:center
}
.divClass{
    margin: 15px 0px;
}
.dialog-footer{
    float: right;
}
.tipClass{
    background-color: oldlace;
    color: orange;
    height: 28px;
    line-height: 28px;
    padding-left: 10px;
    font-size: 12px;
}
/deep/.el-button--medium {
    padding: 0px 20px;
    margin-top: 85px;
}
.iconClass{
    float:right;
    margin-right:25px;
    line-height: 1.5;
}
/deep/.el-dialog{
    width: 28% !important;
}
/deep/.el-dialog__body{
    height: 300px;
    padding: 0px 20px;
}
</style>